<extend name="./base"/>
<block name="main">
    <div class="wrapper">

        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel">
                            <div class="panel-body">
                                <div class="blog-post">
                                    <ul>
                                        <li <?php echo $seeType==0?'style="background-color: #eeeeee;"':''; ?> ><a href="{:U('infocent',array('user_id'=>$userData['id'],'seeType'=>0))}"><i class="  fa fa-comments-o"></i>好友动态</a></li>
                                        <li <?php echo $seeType==1?'style="background-color: #eeeeee;"':''; ?>><a href="{:U('infocent',array('user_id'=>$userData['id'],'seeType'=>1))}"><i class="  fa fa-comments-o"></i>特别关心</a></li>
                                        <li <?php echo $seeType==2?'style="background-color: #eeeeee;"':''; ?>><a href="{:U('infocent',array('user_id'=>$userData['id'],'seeType'=>2))}"><i class="  fa fa-comments-o"></i>与我相关</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel">
                            <header class="panel-heading">
                                发表说说
                                    <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                     </span>
                            </header>
                            <div class="p-0 panel-body ">
                                <form>
                                <textarea  name="content" class="form-control input-lg p-text-area" rows="2"
                                          placeholder="发表一下今天的心情吧！"></textarea>
                                </form>
                                <footer class="panel-footer">

                                    <button class="btn btn-post pull-right subSay">发表说说</button>
                                    <ul class="nav nav-pills p-option">
                                        <input type="file" id="pic" value="选择图片" multiple="multiple" name="pic[]">
                                    </ul>
                                    <ul id="pic_tmp"></ul>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel">
                            <header class="panel-heading">
                                最新动态
                                    <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                     </span>
                            </header>
                            <div class="panel-body">
                                <ul class="activity-list load-tx">
                                    <?php if(count($dynamics)>0):?>
                                    <?php foreach($dynamics as $v):?>
                                    <li did="<?=$v['id']?>">
                                        <p><a href="{:U('Index/index',array('user_id'=>$userData['id']))}"><span><?=$v['username']?></span></a></p>

                                        <div class="avatar">
                                            <img username="<?=$v['username']?>" uid="<?=$v['uid']?>" src="__PUBLIC__<?=$v['zonedp']?>" alt=""/>
                                        </div>
                                        <div class="activity-desk album">
                                            <?=$v['content']?>
                                        </div>
                                        <p style="margin-top:15px;">
                                            <span><?=date('Y-m-d H:i',$v['ctime'])?></span>
                                            <span class="message_reply" onclick="message_reply(this,0);">评论</span>
                                        </p>
                                        <div class="reply col-md-12">
                                            <if condition="count($v['comments']) gt 0">
                                                <?php foreach($v['comments'] as $k=>$r):?>
                                                <?php if($r['pid'] == '0'):?>
                                                <div class="avatar">
                                                    <img message-id="<?=$r['id']?>" username="<?=$r['username']?>" uid="<?=$r['uid']?>" alt="" src="__PUBLIC__<?=$r['zonedp']?>">
                                                </div>
                                                <div class="activity-desk" message-id="<?=$r['id']?>">

                                                    <h5><span><?=$r['username']?></span>
                                                        <span onclick="message_reply(this,1);">评论</span>
                                                        <span onclick="del_comment(this);">删除</span></h5>
                                                        <span><?=$r['content']?></span>
                                                    <p class="text-muted"><?=date('Y-m-d H:i',$r['ctime'])?></p>

                                                </div>
                                                <?php endif;?>
                                                <!--在些判断是否有回复，如果有回复则在下面显示出-->
                                                <?php for($i=$k+1;$i<count($v['comments']);$i++):?>
                                                <?php if($v['comments'][$i]['pid'] == $r['id']):?>
                                                <div class="avatar col-md-offset-1">
                                                    <img message-id="<?=$v['comments'][$i]['id']?>" username="<?=$v['comments'][$i]['username']?>" uid="<?=$v['comments'][$i]['uid']?>" alt="" src="__PUBLIC__<?=$v['comments'][$i]['zonedp']?>">
                                                </div>
                                                <div class="col-md-offset-1" message-id="<?=$v['comments'][$i]['id']?>">

                                                    <h5><span><?=$v['comments'][$i]['username']?></span>
                                                        <span onclick="message_reply(this,1);">评论</span>
                                                        <span onclick="del_comment(this);">删除</span></h5>
                                                    <span><?=$v['comments'][$i]['content']?></span>
                                                    <p class="text-muted"><?=date('Y-m-d H:i',$v['comments'][$i]['ctime'])?></p>

                                                </div>
                                                <?php endif;?>
                                                <?php endfor;?>
                                                <?php endforeach;?>
                                            </if>

                                        </div>
                                        <div class="col-md-8"></div>
                                    </li>
                                    <?php endforeach;?>
                                    <?php endif;?>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div style="border: 1px #000 solid;background-color:#fcf8e3; width: 240px; height: 135px;position: absolute;display: none;" class="cart" uid="">
        <ul class="activity-list">
            <div class="avatar">
                <img style="width: 75px; height: 75px;" alt="" src="">
            </div>
            <span style="margin-top: 30px; margin-left: 15px; display: inline-block;"></span>
        </ul>
        <button  class="add-pengyou">加为好友</button>
        <button  class="add-attention">特别关心</button>
        <button  class="cancel-pengyou">取消好友</button>
        <button  class="cancel-attention">取消关心</button>
    </div>
</block>
<block name="script">
    <script>
        //判断是评论还是回复0为评论，其它的则为对应的id
        var message_id = 0;
        var timeer = null;
        //ajax上传图片
        $("#pic").on('change',function(){
            var formData = new FormData();
            $.each($('#pic')[0].files, function(i, file) {
                formData.append('upload_file[]', file);
            });

            $.ajax({
                url: '{:U("Say/uploadimg",array("user_id"=>$userData["id"]))}',
                type: 'POST',
                cache: false,
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function(rs){
                    var imgbox = $('#pic_tmp');
                    var lis = "";
                    $.each(rs.info,function(i,n){
                        lis += '<li><img width="100" height="100" src="__PUBLIC__/uploads/' + n.savepath + n.savename +'"><input class="imgpath" type="hidden" name="img[]" value="'+ n.savepath + n.savename +'"></li>' ;
                    });
                    imgbox.append(lis);
                }
            });

        });
        //ajax删除图片
        $('#pic_tmp').on('click','img',function(){
            var self=$(this);
            var picname = self.next().val();
            self.parents('li').remove();
            $('#pic').val(''); // 清空选择的照片

            //ajax删除服务器的图片
            $.ajax({
                type: "POST",
                url: "{:U('Say/delpic',array('user_id'=>$userData['id']))}",
                data: {'picname':picname},
                dataType: "json",
                success: function(rs){
                    // alert(rs.msg);
                }
            });
        });

        //提交说说
        $('.subSay').on('click',function(){
            var content = $("textarea[name='content']").val().trim();
            var img = [];
            $.each($('.imgpath'),function(i,n){
                img[i] = $(".imgpath").eq(i).val();
            })
            if(content.length==0){
                return false;
            }
            $.ajax({
                type: "POST",
                url: "{:U('Say/tosave',array('user_id'=>$userData['id']))}",
                data: {"content":content,'img':img,'source':'infocent'},
                dataType: "json",
                success: function(rs){
                    if(rs.status == '0'){
                        alert('发表成功！');
                        //创建一个说说实例
                        $('.activity-list').prepend('<li did="'+rs.id+'" did="<?=$this->myUserData["id"]?>">\
                        <p><a href=""><span>'+rs.username+'</span></a></p>\
                        <div class="avatar">\
                                <img uid="<?=$userData["id"]?>" src="__PUBLIC__'+rs.zonedp+'" alt=""/>\
                                </div>\
                                <div class="activity-desk album">'+rs.content+'\
                    </div>\
                        <p style="margin-top:15px;">\
                        <span>'+rs.ctime+'</span>\
                        <span class="message_reply" onclick="message_reply(this,0);">评论</span>\
                                <span class="del" onclick="del_dynamic(this);">删除</span>\
                                </p>\
                                </li>');
                        $('#pic_tmp').empty(); // 删除ajax加载过来的图片
                        $("textarea[name='content']").val(''); // 清空输入框
                        $('#pic').val(''); // 清空选择的照片
                    }
                }
            });
        });
        function message_reply(obj,reply)
        {
            //如果是回复评论的话，那么就是obj的父元素的父元素的父元素
            if(reply==1)
            {
                //找到message_id
                message_id = $(obj).parent().parent().attr('message-id') ;
                obj = $(obj).parent();
            }else
            {
                message_id = 0;
            }
            $('.replyler').remove();
            $(obj).parent().parent().append('<div class="replyler col-md-6">\
                    <textarea placeholder="快来留言啊！" rows="2" class="form-control input-lg"></textarea>\
                    <button onclick="sendReply(this);">提交</button><button onclick="clearReply(this);">取消</button>\
                    </div>');
        }
        function del_dynamic(obj)
        {
            var did = $(obj).parent().parent().attr('did');
            var objobj = obj;
            $.ajax({
                type: 'post',
                url: "{:U('Dynamic/delDynamic',array('user_id'=>$userData['id']))}",
                data: {
                    did: did,
                },
                success: function (data) {
                    if (data.status == '0') {
                        $(objobj).parent().parent().remove();
                    }
                    alert(data.message);
                }
            });
        }
        function del_comment(obj)
        {
            var mid = $(obj).parent().parent().attr('message-id');
            var objobj = obj;
            $.ajax({
                type: 'post',
                url: "{:U('Dynamic/delComment',array('user_id'=>$userData['id']))}",
                data: {
                    mid: mid,
                },
                success: function (data) {
                    if (data.status == '0') {
                        $(objobj).parent().parent().prev().remove();
                        $(objobj).parent().parent().remove();
                    }
                    alert(data.message);
                }
            });
        }
        function sendReply(obj) {
            //1.收集数据。2.发送数据。3.提示结果。4.删除回复器。5.添加回复
            //判断是谁还是回复
            var content = $('.replyler textarea').val();
            if(message_id == 0)
            {
                var did = $(obj).parent().parent().attr('did');
            }else
            {
                var did = $(obj).parent().parent().parent().attr('did');
            }
            var objobj = obj;
            $.ajax({
                type: 'post',
                url: "{:U('Dynamic/reply',array('user_id'=>$userData['id']))}",
                data: {
                    did: did,
                    content: content,
                    pid: message_id,
                },
                success: function (data) {
                    if (data.status == '0') {
                        //清空原先的回复工具
                        $(objobj).parent().remove();
                        //插入数据,判断是提交评论还是回复
                        if(message_id == 0)
                        {
                            //添加评论
                            $('.reply ').prepend('<div class="avatar">\
                                    <img uid="<?=$userData["id"]?>" alt="" src="__PUBLIC__'+data.zonedp+'"></div>\
                                <div class="activity-desk" message-id="'+data.id+'">\
                                <h5><a href="#">'+data.username+'</a>\
                        <span onclick="message_reply(this,1);">评论</span>\
                                <span onclick="del_comment(this);">删除</span></h5>\
                        <span>'+data.content+'</span>\
                        <p class="text-muted">'+data.ctime+'</p></div>');
                        }else
                        {
                            //回复评论
                            $('div[message-id="'+message_id+'"] ').after('<div class="avatar col-md-offset-1">\
                                    <img uid="<?=$userData["id"]?>" alt="" src="__PUBLIC__'+data.zonedp+'"></div>\
                                <div class="col-md-offset-1" message-id="'+data.id+'">\
                                <h5><a href="#">'+data.username+'</a>\
                        <span onclick="message_reply(this,1);">评论</span>\
                                <span onclick="del_comment(this);">删除</span></h5>\
                        <span>'+data.content+'</span>\
                        <p class="text-muted">'+data.ctime+'</p></div>');
                        }

                    }
                    alert(data.message);
                }
            });
        }
        function clearReply(obj) {
            $(obj).parent().remove();
        }
        //弹出名片
        $('.load-tx .avatar img').mouseenter(function (e) {
            //使用ajax请求到数据，好像不使用ajax请求数据也没什么关系
            $('.add-pengyou').css({'display':'block'});
            $('.add-attention').css({'display':'block'});
            $('.cancel-pengyou').css({'display':'block'});
            $('.cancel-attention').css({'display':'block'});
            var uid = '<?=$userData["id"]?>';
            if(uid == $(this).attr('uid'))
            {
                $('.add-pengyou').css({'display':'none'});
                $('.add-attention').css({'display':'none'});
                $('.cancel-pengyou').css({'display':'none'});
                $('.cancel-attention').css({'display':'none'});
            }else
            {
                $.ajax({
                    type: 'post',
                    async:false,
                    url: "{:U('User/pengyouLevel',array('user_id'=>$userData['id']))}",
                    data: {
                        uid: $(this).attr('uid'),
                    },
                    success: function (data) {
                        if(data.status == 0)
                        {
                            $('.add-attention').css({'display':'none'});
                            $('.cancel-pengyou').css({'display':'none'});
                            $('.cancel-attention').css({'display':'none'});
                        }else if(data.status == 1)
                        {
                            $('.add-pengyou').css({'display':'none'});
                            $('.cancel-attention').css({'display':'none'});
                        }else if(data.status == 2)
                        {
                            $('.add-pengyou').css({'display':'none'});
                            $('.add-attention').css({'display':'none'});
                            $('.cancel-pengyou').css({'display':'none'});
                        }
                    }
                });
            }
            $('.cart').attr('uid',$(this).attr('uid'))
            $('.cart ul div img').attr('src',$(this).attr('src'));
            $('.cart ul span').text($(this).attr('username'));
            $('.cart').css({'display':'block','top':e.pageY+'px','left':e.pageX+'px'});
        });
        //取消隐藏名片
        $('.cart').mouseenter(function () {
            clearTimeout(timeer);
            timeer=null;
        });
        $('.cart').mouseleave(function () {
            $('.cart').css({'display':'none'});
        });
        //触发删除名片定时器
        $('.load-tx .avatar img').mouseleave(function (e) {
            timeer = setTimeout(function () {
                $('.cart').css({'display':'none'});
            },1000);
        });
        $('.add-pengyou').click(function () {
            var uid = $(this).parent().attr('uid');
            $.ajax({
                type: 'post',
                url: "{:U('User/addPengyou',array('user_id'=>$userData['id']))}",
                data: {
                    uid: uid,
                },
                success: function (data) {
                    if (data.status == '0') {

                    }
                    alert(data.message);
                }
            });
        });
        $('.add-attention').click(function () {
            var uid = $(this).parent().attr('uid');
            $.ajax({
                type: 'post',
                url: "{:U('User/addAttention',array('user_id'=>$userData['id']))}",
                data: {
                    uid: uid,
                },
                success: function (data) {
                    if (data.status == '0') {

                    }
                    alert(data.message);
                }
            });
        })
        $('.cancel-pengyou').click(function () {
            var uid = $(this).parent().attr('uid');
            $.ajax({
                type: 'post',
                url: "{:U('User/cancelPengyou',array('user_id'=>$userData['id']))}",
                data: {
                    uid: uid,
                },
                success: function (data) {
                    if (data.status == '0') {

                    }
                    alert(data.message);
                }
            });
        });
        $('.cancel-attention').click(function () {
            var uid = $(this).parent().attr('uid');
            $.ajax({
                type: 'post',
                url: "{:U('User/cancelAttention',array('user_id'=>$userData['id']))}",
                data: {
                    uid: uid,
                },
                success: function (data) {
                    if (data.status == '0') {

                    }
                    alert(data.message);
                }
            });
        });
    </script>
</block>
